<template>
	<view class="wrap">
		<view class="bill-details-wrap form">
			<view v-if="!isReadonly" style="color: #fc7e0a; text-align: right; font-size: 12px">等待我审核</view>
			<!-- 单据明细 -->
			<ProblemBillDetailsViewer :period="$GC.APPROVE_PERIOD.filter" :billId="model.ProblemId + ''" billType="invoice" @detail-loaded="onDetailLoaded('details')" />
		</view>
		<view class="form-wrap" style="margin-top: 20rpx">
			<u-form class="form" :model="model" ref="uForm" labelWidth="100" labelPosition="left" :labelStyle="form_label_Style">
				<!-- <u-form-item @tap="pickerInputEvent('ProblemType')" borderBottom label="问题类型" prop="ProblemType">
					<gf-input-ref :readonly="isReadonly" clearable placeholder="请输入" v-model="model.ProblemType" type="text" maxlength="200" border="none"></gf-input-ref>
				</u-form-item> -->
				<!-- <u-form-item @tap="pickerInputEvent('ProblemLevel')" borderBottom label="问题级别" prop="ProblemLevel">
					<gf-input-ref :readonly="isReadonly" clearable placeholder="请输入" v-model="model.ProblemLevel" type="text" maxlength="200" border="none"></gf-input-ref>
				</u-form-item> -->
				<u-form-item @tap="refInputClick('ProblemDuty')" borderBottom label="问题处理人" prop="ProblemDuty">
					<gf-input-ref
						:readonly="isReadonly"
						:docType="$GC.BASEDOC.PSNDOC"
						clearable
						placeholder="请输入"
						v-model="model.ProblemDuty"
						type="text"
						maxlength="200"
						border="none"
					></gf-input-ref>
				</u-form-item>
				<!-- <u-form-item borderBottom label="问题处理指导意见" prop="ProblemApproveStr" label-position="top" >
					<u--textarea :disabled="isReadonly" border="none"  placeholder="请输入内容"></u--textarea>
				</u-form-item> -->
				<u-form-item borderBottom label="审批批语" prop="ProblemApproveStr" label-position="top">
					<u--textarea
						maxlength="1000"
						autoHeight
						:count="true"
						:disabled="isReadonly"
						v-model="model.ProblemApproveStr"
						border="none"
						placeholder="请输入"
					></u--textarea>
				</u-form-item>
			</u-form>
		</view>
		<view class="approve-line" style="margin-bottom: 100rpx">
			<ProblemApproveFlowViewer :billId="model.ProblemId + ''" billType="invoice" @detail-loaded="onDetailLoaded('flow')" />
		</view>
		<view class="bottom-fix-wrap" v-if="isReadonly">
			<u-row gutter="10" justify="space-between">
				<u-col span="12">
					<view class="demo-layout bg-purple">
						<u-button class="btn" type="error" @click="unCommit">收回</u-button>
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="bottom-fix-wrap" v-if="!isReadonly">
			<u-row gutter="12" justify="space-between">
				<u-col span="12">
					<view class="demo-layout bg-purple">
						<u-button class="btn" type="primary" @click="showApproveOpr">开启审批</u-button>
					</view>
				</u-col>
			</u-row>

			<!-- <u-row gutter="10" justify="space-between" v-if="isSecondFilter">
				<u-col span="12">
					<view class="demo-layout bg-purple">
						<u-button class="btn" type="warning" @click="submit('returnxt')">退回协同部门</u-button>
					</view>
				</u-col>
				<u-col span="4">
					<view class="demo-layout bg-purple">
						<u-button class="btn" type="error" @click="submit('invalid')">无效问题</u-button>
					</view>
				</u-col>
				<u-col span="4">
					<view class="demo-layout bg-purple-light">
						<u-button class="btn" type="primary" @click="submit('effective')">有效问题</u-button>
					</view>
				</u-col>
			</u-row> -->
			<!-- <u-row gutter="10" justify="space-between" v-else>
				<u-col span="6">
					<view class="demo-layout bg-purple">
						<u-button class="btn" type="error" @click="submit('invalid')">无效问题</u-button>
					</view>
				</u-col>
				<u-col span="6">
					<view class="demo-layout bg-purple-light">
						<u-button class="btn" type="primary" @click="submit('effective')">有效问题</u-button>
					</view>
				</u-col>
			</u-row> -->
		</view>
		<u-popup :show="showReassignmentPop" :overlayStyle="overlayStyle" z-index="900" :round="10" mode="bottom" @close="showReassignmentPop = false">
			<view class="u-popup-slot">
				<u-form class="reassignmentForm" :model="model" ref="reassignmentForm" labelWidth="100" labelPosition="left" :labelStyle="form_label_Style">
					<u-form-item @tap="refInputClick('ProblemDef5')" borderBottom label="改派部门" prop="ProblemDef5">
						<gf-input-ref
							:docType="$GC.BASEDOC.DEPT"
							clearable
							placeholder="请输入"
							v-model="model.ProblemDef5"
							type="text"
							maxlength="200"
							border="none"
						></gf-input-ref>
					</u-form-item>
					<u-form-item @tap="refInputClick('ProblemDef6')" borderBottom label="协同人" prop="ProblemDef6">
						<gf-input-ref
							:docType="$GC.BASEDOC.PSNDOC"
							clearable
							placeholder="请输入"
							v-model="model.ProblemDef6"
							type="text"
							maxlength="200"
							border="none"
						></gf-input-ref>
					</u-form-item>
					<u-form-item>
						<u-button :plain="true" type="primary" @click="submit('reassignment')">确定</u-button>
					</u-form-item>
				</u-form>
			</view>
		</u-popup>
		<u-picker closeOnClickOverlay :show="showPicker" @close="showPicker = false" @cancel="showPicker = false" @confirm="pickerConfirmEve" :columns="pickerColumns"></u-picker>
	</view>
</template>
<script>
const recorderManager = uni.getRecorderManager();
const innerAudioContext = uni.createInnerAudioContext();

innerAudioContext.autoplay = true;
import { BASEDOC } from '@/common/const/index';
import ProblemBillDetailsViewer from '../../takephoto/pub/approve-details.vue';
import ProblemApproveFlowViewer from '../../takephoto/pub/approve-flow.vue';

// import formRules from './checkFormRules.js';
export default {
	name: 'ProblemFilter',
	components: {
		ProblemApproveFlowViewer, //审批明细
		ProblemBillDetailsViewer // 注册明细页面组件
	},
	data() {
		return {
			form_label_Style: {
				'font-weight': 'bold'
			},
			overlayStyle: {
				'z-index': 900
			},
			rules: {
				ProblemLevel: {
					type: 'string',
					required: true,
					message: '请填写问题级别'
				},
				ProblemType: {
					type: 'string',
					required: true,
					message: '请填写问题类型'
				}
			},

			showReassignmentPop: false, //指派新部门
			showCpField: false, //是否显示协同字段
			isSecondFilter: false, //是否是第二次筛选
			showPicker: false,
			showStartTimeDateTimePicker: false,
			showEndTimeDateTimePicker: false,

			pickerColumns: [],
			pickerCurrentAttrName: '',

			dateTimePickerCfg: {
				year: true,
				month: true,
				day: true,
				hour: true,
				minute: true,
				second: true
			},
			// 表单
			model: {
				pk_org: '',
				ProblemId: '',
				ProblemCode: '',
				ProblemTitle: '',
				ProblemFindByPsn: '',

				ProblemPerson: '',
				ProblemLocation: '',

				ProblemCreDate: '',
				ProblemStatrTime: '',
				ProblemEndTime: '',

				ProblemDescription: '',
				ProblemVoice: '',
				ProblemPicture: '',
				ProblemVideo: '',

				ProblemDuty: '',
				ProblemLevel: '',
				ProblemType: '',

				ProblemDef1: false,
				ProblemDef2: '',
				ProblemDef3: '',
				ProblemDef5: '', //改派部门
				ProblemDef6: '', //改派审核人

				ProblemApproveStr: '' //审批批语
			},
			ProblemApproveId: '', //审批流id
			status: 'add', //表单状态

			officeSelectList: [],
			userSelectList: [],
			current: 0
		};
	},
	computed: {
		/**
		 * 表单是否只读
		 */
		isReadonly: {
			get() {
				return this.status == this.$GC.STATUS.browse;
			},
			set(newValue) {
				this.status == newValue;
			}
		}
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	onLoad(params) {
		this.status = params.status;
		this.model.ProblemId = params.ProblemId + '';
		this.ProblemApproveId = params.ProblemApproveId;

		if (this.status == this.$GC.STATUS.browse || this.status == this.$GC.STATUS.approve) {
			let queryParam = {
				ProblemId: params.ProblemId
			};
			this.$api
				.queryProblemById(queryParam)
				.then((res) => {
					if (res.success) {
						let problemData = res.data[0];
						this.model = problemData;

						if (problemData.ProblemDef1 == 'true') {
							// 主要用于区分初次筛选，还是转部门筛选
							// 不同筛选，可选择字段不一致
							this.isSecondFilter = true;
						}
					}
				})
				.catch((error) => {
					this.$tool.msg('数据加载失败！');
				});
		}
	},
	methods: {
		showApproveOpr() {
			let modeList = [];
			if(this.isSecondFilter){
				modeList = ['有效问题', '无效问题', '退回问题', '转派其他部门'];
			}else{
				modeList = ['有效问题','无效问题'];
			}
			// let modeList = ['有效问题', '无效问题', '退回问题', '转派其他部门'];

			let _this = this;
			uni.showActionSheet({
				itemList: modeList,
				success: function (res) {
					let mode = modeList[res.tapIndex];
					let modeType = '';

					if (mode == '有效问题') {
						modeType = 'effective';
					} else if (mode == '无效问题') {
						modeType = 'invalid';
					} else if (mode == '退回问题') {
						modeType = 'returnxt';
					} else if (mode == '转派其他部门') {
						_this.showReassignmentPop = true;
						return;
					}
					_this.submit(modeType);
				},
				fail: function (res) {}
			});
		},
		// 明细组件以及审批组件加载完成后事件
		onDetailLoaded(type) {},
		async queryFilter(pkDept, attrName) {
			let param = {
				inDeptId: pkDept
			};
			let resp = await this.$api.queryFilterByDeptId(param);
			let { code, data, success } = resp;
			if (code == 200 && success) {
				let jsonData = JSON.parse(data);
				if (jsonData.length != 0) {
					let userData = jsonData[0];
					let pk_psndoc = userData.pk_psndoc;
					if (attrName == 'ProblemDef2') {
						this.model.ProblemDef3 = pk_psndoc;
					}
					if (attrName == 'ProblemDef5') {
						this.model.ProblemDef6 = pk_psndoc;
					}
				} else {
					this.model.ProblemDef3 = '';
				}
			}
		},
		refInputClick(attrName) {
			if (this.isReadonly) {
				return;
			}
			uni.hideKeyboard();

			let refparam = {
				refType: BASEDOC.PSNDOC,
				queryCondition: {}
			};
			if (attrName == 'ProblemDef2' || attrName == 'ProblemDef5') {
				refparam.refType = BASEDOC.DEPT;
				refparam.queryCondition = {};
			}
			if (attrName == 'ProblemDef3') {
				refparam.queryCondition = {
					pk_dept: this.model.ProblemDef2
				};
			}

			if (attrName == 'ProblemDef6') {
				refparam.queryCondition = {
					pk_dept: this.model.ProblemDef5
				};
			}

			let that = this;
			uni.navigateTo({
				url: '/pages/common/listref/listref?refparam=' + JSON.stringify(refparam),
				events: {
					refPageCallBack: function (data) {
						that.model[attrName] = data.refid;

						if (attrName == 'ProblemDef2' || attrName == 'ProblemDef5') {
							that.queryFilter(data.refid, attrName);
						}
					}
				},
				success: function (res) {}
			});
		},

		pickerConfirmEve(e) {
			let val = e.value[0];
			if (this.pickerCurrentAttrName) {
				this.model[this.pickerCurrentAttrName] = val;
			}
			this.showPicker = false;
		},
		pickerInputEvent(attr_name) {
			if (this.isReadonly) {
				return;
			}
			uni.hideKeyboard();
			if (attr_name == 'ProblemType') {
				this.pickerColumns = [['设备', '品质', '安全', '工艺', '环保', '人事', '其他']];
			} else if (attr_name == 'ProblemLevel') {
				this.pickerColumns = [['一般问题', '关键问题']];
			}
			this.pickerCurrentAttrName = attr_name;
			this.showPicker = true;
		},
		navTo(url) {
			uni.navigateTo({
				url: url
			});
		},
		unCommit() {
			let { ProblemId, ProblemDuty, ProblemType, ProblemLevel, ProblemDef1, ProblemDef2, ProblemDef3, ProblemApproveStr } = this.model;
			let param = {
				ProblemId,
				ProblemApproveId: this.ProblemApproveId,
				opType: '问题筛选'
			};

			this.$api
				.unCommit(param)
				.then((res) => {
					uni.showModal({
						title: '提示',
						content: res.message,
						showCancel: false,
						success: function () {
							if (res.success) {
								uni.navigateBack();
							}
						}
					});
				})
				.catch((error) => {
					this.$tool.msg('操作失败！');
				});
		},
		submit(type) {
			let _this = this;
			uni.showModal({
				title: '提示',
				content: '请确定是否进行审核？',
				success: function (res) {
					if (res.confirm) {
						_this.doConfirmSubmit(type)
					} else if (res.cancel) {
					}
				}
			});
		},

		/**
		 * 确定执行审核操作
		 * @param {Object} type 审批类型
		 */
		doConfirmSubmit(type) {
			let { ProblemId, ProblemDuty, ProblemType, ProblemLevel, ProblemDef1, ProblemDef2, ProblemDef3, ProblemDef5, ProblemDef6, ProblemApproveStr } = this.model;
			let param = {
				ProblemProperty: type,
				ProblemId: ProblemId,
				ProblemType: ProblemType,
				ProblemLevel: ProblemLevel,
				ProblemDuty: ProblemDuty,
				ProblemDef1: ProblemDef1 + '',
				ProblemDef2: ProblemDef2,
				ProblemDef3: ProblemDef3,
				ProblemDef5: ProblemDef5,
				ProblemDef6: ProblemDef6,
				ProblemApproveStr: ProblemApproveStr,
				isSecondFilter: this.isSecondFilter
			};

			if (type == 'invalid') {
				param.ProblemProperty = '无效问题';
			} else if (type == 'effective') {
				param.ProblemProperty = '有效问题';
				//当不协同外部门处理时，需要填写问题处理人
				if (!ProblemDef1 && !ProblemDuty) {
					this.$tool.msg('请填写问题处理人！');
					return;
				}
				//当协同外部门处理时，需要填写协同部门
				if (ProblemDef1 && !ProblemDef2) {
					this.$tool.msg('请填写协同部门！');
					return;
				}
				//当协同外部门处理时，需要填写问题协同人
				if (ProblemDef1 && !ProblemDef3) {
					this.$tool.msg('请填写协同人！');
					return;
				}
			} else if (type == 'reassignment') {
				if (ProblemDef5) {
					param.ProblemProperty = '协同部门改派';
				} else {
					this.$tool.msg('请填写改派部门！');
					return;
				}
			} else if (type == 'returnxt') {
				param.ProblemProperty = '协同部门退回';
			}

			// 无效问题
			if (type == 'invalid' || type == 'returnxt') {
				this.$api
					.filterProblem(param)
					.then((res) => {
						uni.showModal({
							title: '提示',
							content: res.message,
							showCancel: false,
							success: function () {
								if (res.success) {
									// 跳转到待办页
									/* uni.navigateTo({
										url: '/pages/bpm/myTaskTodo/myTaskTodo'
									}); */
									uni.navigateBack();
								}
							}
						});
					})
					.catch((error) => {
						this.$tool.msg('操作失败！');
					});
				return;
			}

			this.$refs.uForm
				.validate()
				.then((res) => {
					this.$api
						.filterProblem(param)
						.then((res) => {
							let msgStr = '';
							if (res.code != 200) {
								let msgArrs = JSON.parse(res.message);
								if (Array.isArray(msgArrs)) {
									msgArrs.map((item) => {
										msgStr += item;
									});
								}
							} else {
								msgStr = res.message;
							}
							uni.showModal({
								title: '提示',
								content: msgStr,
								showCancel: false,
								success: function () {
									if (res.success) {
										// 跳转到待办页
										/* uni.navigateTo({
											url: '/pages/bpm/myTaskTodo/myTaskTodo'
										}); */
										uni.navigateBack();
									}
								}
							});
						})
						.catch((error) => {
							this.$tool.msg('操作失败！');
						});
				})
				.catch((errors) => {
					// uni.$u.toast('表单校验失败！');
				});
		},
		
		cancel() {
			uni.navigateBack();
		},
		dateTimePickerCallBack(obj, attr_name) {
			if (attr_name == '') return;
			if (obj == '') {
				this.model[attr_name] = '';
			} else {
				let dateVal = obj.year + '-' + obj.month + '-' + obj.day + ' ';
				let timeVal = obj.hour + ':' + obj.minute + ':' + obj.second;
				this.model[attr_name] = dateVal + timeVal;
			}
		}
	}
};
</script>
<style scoped lang="scss">
.wrap {
	font-family: $font-pingfang;
}
.form-wrap {
	background-color: white;
	font-family: $font-pingfang;
}
.wrap {
	padding: 20rpx;
	background-color: $u-bg-color;
}
.u-row {
	margin: 10rpx 0;
}
.reassignmentForm {
	width: 80%;
}
.u-popup-slot {
	height: 150px;
	@include flex;
	justify-content: center;
	align-items: center;
}
</style>
